<template>
	<view class="content">
		<view class="uploader-wrap">
			<view class="media-item">
				<!-- 上传视频 -->
				<view class="add" @click="upload">
					<image src="/static/img/post_video.png" mode="" style="width: 60rpx;height: 60rpx;"></image>
				</view>
			</view>
			
			<view class="media-item" v-for="(item, index) in mediaList" :key="index" v-if="hasvideo">
				<view  class="video" @click="previewVideo(item)">
					<image v-if="item.progress == 100" :src="item.file + '?vframe/jpg/offset/1'" mode="aspectFill"></image>
					<image v-else class="placeholder" src="/static/img/post_video0.png" mode="widthFix"></image>
					<image class="player-icon" src="/static/img/player_icon.png" mode="widthFix"></image>
				</view>
				<view v-if="item.progress != 100 && item.progress != 0" class="progress">
					<text>{{item.progress}}%</text>
				</view>
			</view>	
		</view>
		<view class="input-wrap">
			<input placeholder="请输入视频标题" v-model="title" @input="inputTitle" maxlength="10"/>
			<view class="length-wrap">
				<text>{{tit_length}}/10</text>
			</view>
		</view>
		<view class="input-wrap">
			<textarea class="textarea" @input="inputDesc" placeholder="添加视频描述,让更多人看到哦~" maxlength="50" />
			<view class="length-wrap">
				<text>{{desc_length}}/50</text>
			</view>
		</view>
		
		<view class="float-wrap editmsg"  @click="addVideo">
			<!-- <image class="login-item-icon" src="../../static/img/fast_icon.png" mode=""></image> -->
			
			<view class="editbox"><image src="/static/img/fast_icon.png" class="editicon"></image>发布</view>
		</view>
		
	</view>
</template>

<script>
	import qiniuUploader from '@/common/qiniu/qiniu_wx.js';
	export default {
		data() {
			return {
				
				myInfo: {},
				title:'',    //视频标题
				msg: '',   //视频介绍
				src: '' ,        //视频地址
				
				desc_length: 0,
				tit_length:0,
				mediaList: [{
					file:'',
					progress:0
				}],
				mediaList_key:'',
				max: 1,
				isFull: false,
				hasvideo:false,
			}
		},
		onLoad(option) {
			
			try {
				const myInfo = uni.getStorageSync('myInfo');
				if (myInfo) {
					this.myInfo = myInfo;
				}
			} catch (e) {
				console.log(e)
			}
		},
		onReady() {
			this.updateQiniuToken();
		},
		onNavigationBarButtonTap(e) {
			
		},
		methods: {
			updateQiniuToken: function () {
				let timestamp = (new Date()).getTime();
				this.$api.api.ajaxData({
					method: 'V1.QiniuToken',
					uid: this.myInfo.id,
					token: this.myInfo.token,
				}, res => {
					if (res.status) {
						let expires = timestamp + res.data.expires*1000;
						this.myInfo.qiniu = {
							token: res.data.token,
							domain: res.data.domain,
							expires: expires
						}
						uni.setStorage({
							key: 'myInfo',
							data: this.myInfo,
							success: () => {
								console.log('myInfo已更新');
							}
						});
					} else {
						uni.showToast({
							title: res.msg,
							position: 'bottom',
							icon: 'none'
						});
					}
				})
			},
			inputTitle: function (e) {
				
				this.tit_length = this.title.length
			},
			inputDesc: function (e) {
				this.msg = e.detail.value
				this.desc_length = this.msg.length
			},

			
			upload: function() {
				
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					sizeType: ['original', 'compressed'],
					count: 1,
					success: (res) => {
						console.log('选择相册视频返回信息',res)
						this.mediaList[0].file= res.tempFilePath;

						this.uploadFile(res.tempFilePath, this.mediaList.length-1)
					}
				})
			
			},
			
			uploadFile: function (file, index) {
				var key = 'file_' + this.$api.api.getRandom(0, 100000000) + '-t_' + (+new Date());
				
				var uploadTask = uni.uploadFile({
					url: this.QINUUPLOADURL,
					filePath: file,
					name: 'file',
					formData: {
						'token': this.myInfo.qiniu.token,
						'key': key
					},
					success: res => {
						
						if (res.statusCode == 200) {
							let dataObject = JSON.parse(res.data);
							console.log('七牛云上传视频返回信息',dataObject);
							
							this.mediaList_key = this.myInfo.qiniu.domain +dataObject.key;
							this.hasvideo = true;
							let temp = this.mediaList[index];
							temp.file = this.myInfo.qiniu.domain + dataObject.key;
							this.$set(this.mediaList, index, temp);
						} else {
							console.log(res)
							uni.showToast({
								title: '上传失败，请稍后再试',
								position: 'bottom',
								icon: 'none'
							})
						}
					},
					fail: err => {
						console.error(err);
						uni.showToast({
							title: '上传失败，请稍后再试',
							position: 'bottom',
							icon: 'none'
						})
					},
				});
				uploadTask.onProgressUpdate(res => {
					let temp = this.mediaList[index]
					temp.progress = res.progress
					this.$set(this.mediaList, index, temp)
				});
			},
			
			previewVideo: function(item) {
				let media = {
					file: item.file
				}
				uni.navigateTo({
					url: '../video/video?media=' + encodeURIComponent(JSON.stringify(media))
				})
			},
			
			addVideo:function(){
				this.src = this.mediaList_key;
				if (this.src == '') {
					showToast = '请选择一个视频';
					uni.showToast({
						title: showToast,
						position: 'bottom',
						icon: 'none'
					});
					return false;
				}
				uni.showLoading({
					title: '',
				});
				setTimeout(function(){
					uni.hideLoading();
				},2000)
				
				// 发布视频
				this.$api.api.ajaxData({
					method: 'V1.VideoCreate',
					uid: this.myInfo.id,
					token: this.myInfo.token,
					title:this.title,    //视频标题
					msg: this.msg,   //视频介绍
					src: this.src ,        //视频地址
					
				}, res => {
				
					uni.hideLoading();
					if (res.status) {
						uni.showToast({
							title: '提交成功',
							position: 'bottom',
							icon: 'none'
						});
						setTimeout(() => {
							uni.$emit('video-page', {
								type: 'update',
							})
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					} else {
						uni.showToast({
							title: res.msg,
							position: 'bottom',
							icon: 'none'
						});
					}
				}, err => {
					uni.hideLoading();
					uni.showToast({
						title: '网络错误，请稍后再试',
						position: 'bottom',
						icon: 'none'
					});
				})
			}
			
			
		}
	}
</script>

<style lang="scss">
	@import '../../common/common.scss';
	.input-wrap {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 30rpx;
		background-color: #fff;
		margin-top: 2rpx;
		// border-top: 1rpx solid #f9f9f9;
		.textarea {
			width: 100%;
			height: 140rpx !important;
		}
		.length-wrap {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			width: 100%;
			padding: 0 30rpx;
		}
	}
	.uploader-wrap {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		padding: 9rpx;
		background-color: #fff;
		.media-item {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 244rpx;
			height: 244rpx;
			box-sizing: border-box;
			position: relative;
			&.hidden {
				display: none;
			}
			.image {
				display: flex;
				justify-content: center;
				align-items: center;
				image {
					display: block;
					width: 230rpx;
					height: 230rpx;
					border-radius: 10rpx;
				}
			}
			.video {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 230rpx;
				height: 230rpx;
				border-radius: 10rpx;
				background-color: #CCCCCC;
				position: relative;
				image {
					display: block;
					width: 230rpx;
					height: 230rpx;
					border-radius: 10rpx;
				}
				.placeholder {
					width: 80rpx;
					border-radius: 0;
				}
				.player-icon {
					width: 60rpx;
					border-radius: 0;
					position: absolute;
					left: 50%;
					top: 50%;
					margin-left: -30rpx;
					margin-top: -30rpx;
				}
			}
			.progress {
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: rgba(0, 0, 0, 0.6);
				border-radius: 10rpx;
				position: absolute;
				left: 7rpx;
				right: 7rpx;
				top: 7rpx;
				bottom: 7rpx;
				text {
					font-size: 24rpx;
					color: #ffffff;
				}
			}
		}
		.add {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 228rpx;
			height: 228rpx;
			border: 1rpx solid #ddd;
			border-radius: 10rpx;
			.uni-icon {
				font-size: 120rpx;
				color: #ddd;
			}
			.add-image {
				width: 50rpx;
			}
			.add-text {
				font-size: 18rpx;
			}
		}
	}

    .float-wrap {
		position: fixed;
		bottom: 50rpx;
		
		&.editmsg{
			width: 500rpx;
			height: 70rpx;
			font-size: 30rpx;
			background-color: #fe2e61;
			color: #fff;
			left: 50%;
			text-align: center;
			padding-top: 18rpx;
			border-radius: 20rpx;
			transform: translate(-50%,0);
			
			.editbox{
				display: flex;
				align-items: center;
				text-align: center;
				padding-left: 190rpx;
			}
			.editicon{
				width: 40rpx;
				height: 40rpx;
				margin-right: 16rpx;
			}
		}
	}
	
</style>
